<template>
  <div class="box">
    <aside-box>
      <template #zh> 折线图 </template>
      <template #en> line chart </template>
      <div class="line" ref="lineRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import asideBox from "@/components/asideBox";
import pointUrl from "@/assets/images/point.png";
const chartDataYear = ref(["2020", "2021", "2022", "2023", "2024", "2025"]);

const chartDataLine = ref([10, 20, 20, 30, 50, 10]);

const option = {
  // 提示框组件  鼠标经过 tip提示
  tooltip: {},
  // 图例组件
  // legend: {
  //   right: "0",
  //   itemGap: 30,
  //   textStyle: {
  //     color: "#C6D1DB", //文字的颜色
  //     fontSize: 12,
  //     fontFamily: "阿里妈妈数黑体 Bold",
  //   },
  // },
  // 上下左右及大小-设置图表占总面积的地方
  grid: {
    left: "7%",
    right: "0",
    bottom: "10%",
  },
  // grid坐标系的x轴
  xAxis: {
    type: "category",
    data: chartDataYear.value,
    boundaryGap: ["10%", "10%"], // 设置第一个数和最后一个数距离轴边界的距离为轴刻度的 10%
    axisLine: {
      // 控制轴线样式
      lineStyle: {
        color: "#3F4F5E", // 设置轴线颜色
        width: 0, // 设置轴线宽度
      },
    },
    axisLabel: {
      // 控制轴标签样式
      color: "#B4C0CC", // 设置轴标签文字颜色
      fontSize: 12, // 设置轴标签文字大小
      fontFamily: "阿里妈妈数黑体 Bold",
    },
  },
  // grid坐标系的y轴
  yAxis: [
    {
      name: "单位: 个",
      nameTextStyle: {
        color: "#B4C0CC",
        fontSize: 12,
        fontFamily: "阿里妈妈数黑体 Bold",
      },
      axisLabel: {
        color: "#B4C0CC",
        fontSize: 12,
        fontFamily: "阿里妈妈数黑体 Bold",
        // showMinLabel: false, //不显示最小刻度线值
        // showMaxLabel: false, //不显示最大刻度线值
      },
      splitLine: {
        show: true, // 网格线是否显示
        lineStyle: {
          type: "dashed",
          color: "#35414D",
          width: 1,
        },
      },
      axisLine: {
        lineStyle: {
          color: "#B4C0CC", //最左侧Y轴颜色
        },
      },
    },
  ],
  // 系列列表。每个系列通过 type 决定自己的图表类型
  series: [
    {
      name: "科研论文数量",
      type: "line",
      smooth: true,
      symbol: "image://" + pointUrl,
      symbolSize: 14, // 拐点图片的大小
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(255, 209, 92, 0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(255, 209, 92, 0.1)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
      },
      itemStyle: {
        color: "#FFD15C",
      },

      data: chartDataLine.value,
    },
  ],
};

// 实例化echarts
const [lineRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .line {
    width: 100%;
    height: 200px;
  }
}

:deep(.custom-tooltip) {
  color: #fff !important;
}
</style>